<template>
  <view class="container">
    <!-- 顶部状态栏 -->
    <view class="status-bar"></view>
    
    <!-- 导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="nav-icon">←</text>
        <text class="nav-text">返回</text>
      </view>
      <view class="nav-title">企业信息设置</view>
      <view class="nav-right"></view>
    </view>
    
    <!-- 页面内容 -->
    <view class="page-content">
      <!-- 基本信息卡片 -->
      <view class="card basic-info-card">
        <view class="card-header">
          <text class="card-title">基本信息</text>
          <view class="card-icon">
            <text class="iconfont">📝</text>
          </view>
        </view>
        
        <view class="form-section">
          <!-- 企业名称 -->
          <view class="form-item">
            <text class="form-label">企业名称</text>
            <input 
              v-model="companyInfo.realName"
              type="text" 
              placeholder="请输入企业真实名称"
              class="form-input"
			  style="width: auto;"
              maxlength="50"
            />
            <text class="form-tip">此名称仅用于后台管理，不对外显示</text>
          </view>
          
          <!-- 显示别名 -->
          <view class="form-item">
            <text class="form-label">显示别名</text>
            <input 
              v-model="companyInfo.aliasName"
              type="text" 
              placeholder="请输入在排名中显示的名称"
              class="form-input"
			  style="width: auto;"
              maxlength="10"
            />
            <text class="form-tip">2-10个字符，将在能耗排名中显示</text>
            <text class="char-count">{{ companyInfo.aliasName.length }}/10</text>
          </view>
          
          <!-- 示例别名 -->
          <view class="example-section" v-if="!companyInfo.aliasName">
            <text class="example-title">不知道起什么名字？试试这些：</text>
            <view class="example-tags">
              <text 
                v-for="example in exampleAliases" 
                :key="example"
                class="example-tag"
                @tap="companyInfo.aliasName = example"
              >
                {{ example }}
              </text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 空间信息卡片 -->
      <view class="card space-info-card">
        <view class="card-header">
          <text class="card-title">空间信息</text>
          <view class="card-icon">
            <text class="iconfont">📍</text>
          </view>
        </view>
        
        <view class="form-section">
          <!-- 所在楼层 -->
          <view class="form-item">
            <text class="form-label">所在楼层</text>
            <picker 
              mode="selector" 
              :range="floorOptions" 
              range-key="label"
              :value="selectedFloorIndex"
              @change="onFloorChange"
              class="form-picker"
            >
              <view class="picker-trigger">
                <text class="picker-value">{{ companyInfo.floor || '请选择所在楼层' }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
          
          <!-- 办公面积 -->
          <view class="form-item">
            <text class="form-label">办公面积</text>
            <view class="input-with-unit">
              <input 
                v-model="companyInfo.area"
                type="number" 
                placeholder="请输入办公面积"
                class="form-input number-input"
              />
              <text class="input-unit">m²</text>
            </view>
            <text class="form-tip">用于计算单位面积能耗排名</text>
          </view>
          
          <!-- 面积参考 -->
          <view class="reference-section">
            <text class="reference-title">面积参考：</text>
            <view class="reference-tags">
              <text 
                v-for="ref in areaReferences" 
                :key="ref.value"
                class="reference-tag"
                @tap="companyInfo.area = ref.value"
              >
                {{ ref.label }}
              </text>
            </view>
          </view>
        </view>
      </view>
      
      <!-- 行业信息卡片 -->
      <view class="card industry-info-card">
        <view class="card-header">
          <text class="card-title">行业信息</text>
          <view class="card-icon">
            <text class="iconfont">🏭</text>
          </view>
        </view>
        
        <view class="form-section">
          <!-- 行业分类 -->
          <view class="form-item">
            <text class="form-label">行业分类</text>
            <picker 
              mode="selector" 
              :range="industryOptions" 
              range-key="label"
              :value="selectedIndustryIndex"
              @change="onIndustryChange"
              class="form-picker"
            >
              <view class="picker-trigger">
                <text class="picker-value">{{ companyInfo.industry || '请选择行业分类' }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
            <text class="form-tip">用于同行业能耗对比</text>
          </view>
          
          <!-- 员工规模 -->
          <view class="form-item">
            <text class="form-label">员工规模</text>
            <picker 
              mode="selector" 
              :range="staffSizeOptions" 
              range-key="label"
              :value="selectedStaffSizeIndex"
              @change="onStaffSizeChange"
              class="form-picker"
            >
              <view class="picker-trigger">
                <text class="picker-value">{{ companyInfo.staffSize || '请选择员工规模' }}</text>
                <text class="picker-arrow">▼</text>
              </view>
            </picker>
          </view>
          
          <!-- 营业时间 -->
          <view class="form-item">
            <text class="form-label">主要营业时间</text>
            <view class="time-range">
              <picker 
                mode="time" 
                :value="companyInfo.businessHours.start"
                @change="onStartTimeChange"
                class="time-picker"
              >
                <view class="time-trigger">
                  <text class="time-value">{{ companyInfo.businessHours.start || '开始时间' }}</text>
                </view>
              </picker>
              <text class="time-separator">至</text>
              <picker 
                mode="time" 
                :value="companyInfo.businessHours.end"
                @change="onEndTimeChange"
                class="time-picker"
              >
                <view class="time-trigger">
                  <text class="time-value">{{ companyInfo.businessHours.end || '结束时间' }}</text>
                </view>
              </picker>
            </view>
            <text class="form-tip">用于分析用电时段特征</text>
          </view>
        </view>
      </view>
      
      <!-- 用电特征卡片 -->
      <view class="card usage-feature-card">
        <view class="card-header">
          <text class="card-title">用电特征</text>
          <view class="card-icon">
            <text class="iconfont">⚡</text>
          </view>
        </view>
        
        <view class="form-section">
          <!-- 主要用电设备 -->
          <view class="form-item">
            <text class="form-label">主要用电设备</text>
            <view class="checkbox-group">
              <view 
                v-for="device in deviceOptions" 
                :key="device.value"
                class="checkbox-item"
                @tap="toggleDevice(device.value)"
              >
                <view class="checkbox" :class="{ 'checkbox-checked': companyInfo.mainDevices.includes(device.value) }">
                  <text class="checkmark" v-if="companyInfo.mainDevices.includes(device.value)">✓</text>
                </view>
                <text class="checkbox-label">{{ device.label }}</text>
              </view>
            </view>
          </view>
          
          <!-- 是否有独立空调 -->
          <view class="form-item">
            <text class="form-label">独立空调系统</text>
            <view class="switch-group">
              <text class="switch-label">{{ companyInfo.hasIndependentAC ? '有' : '无' }}</text>
              <switch 
                :checked="companyInfo.hasIndependentAC" 
                @change="onACSwitchChange" 
                color="#1890ff"
              />
            </view>
          </view>
          
          <!-- 是否24小时运营 -->
          <view class="form-item">
            <text class="form-label">24小时运营</text>
            <view class="switch-group">
              <text class="switch-label">{{ companyInfo.is24HourOperation ? '是' : '否' }}</text>
              <switch 
                :checked="companyInfo.is24HourOperation" 
                @change="on24HourSwitchChange" 
                color="#1890ff"
              />
            </view>
          </view>
        </view>
      </view>
      
      <!-- 数据使用说明 -->
      <view class="card data-usage-card">
        <view class="card-header">
          <text class="card-title">数据使用说明</text>
          <view class="card-icon">
            <text class="iconfont">🔒</text>
          </view>
        </view>
        
        <view class="usage-content">
          <view class="usage-item">
            <text class="usage-icon">👥</text>
            <text class="usage-text">企业真实名称仅用于后台管理，不会在排名中显示</text>
          </view>
          <view class="usage-item">
            <text class="usage-icon">🏆</text>
            <text class="usage-text">显示别名将用于能耗排名展示，保护企业隐私</text>
          </view>
          <view class="usage-item">
            <text class="usage-icon">📊</text>
            <text class="usage-text">面积信息用于计算单位面积能耗，确保排名公平性</text>
          </view>
          <view class="usage-item">
            <text class="usage-icon">🔍</text>
            <text class="usage-text">行业信息用于同行业能效对比分析</text>
          </view>
        </view>
      </view>
      
      <!-- 保存按钮 -->
      <view class="action-section">
        <button class="save-btn" @tap="saveCompanyInfo" :disabled="!isFormValid">
          <text class="btn-text">保存企业信息</text>
        </button>
        <text class="save-tip" v-if="!isFormValid">请填写完整的企业基本信息</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      companyInfo: {
        realName: '',
        aliasName: '',
        floor: '',
        area: '',
        industry: '',
        staffSize: '',
        businessHours: {
          start: '09:00',
          end: '18:00'
        },
        mainDevices: [],
        hasIndependentAC: false,
        is24HourOperation: false
      },
      
      // 楼层选项
      floorOptions: [
        { label: 'B2层', value: 'B2' },
        { label: 'B1层', value: 'B1' },
        { label: '1层', value: '1F' },
        { label: '2层', value: '2F' },
        { label: '3层', value: '3F' },
        { label: '4层', value: '4F' },
        { label: '5层', value: '5F' },
        { label: '6层', value: '6F' },
        { label: '7层', value: '7F' },
        { label: '8层', value: '8F' },
        { label: '9层', value: '9F' },
        { label: '10层', value: '10F' },
        { label: '11层', value: '11F' },
        { label: '12层', value: '12F' },
        { label: '13层', value: '13F' },
        { label: '14层', value: '14F' },
        { label: '15层', value: '15F' }
      ],
      
      // 行业选项
      industryOptions: [
        { label: '科技/互联网', value: '科技' },
        { label: '金融/投资', value: '金融' },
        { label: '咨询/服务', value: '咨询' },
        { label: '医疗/健康', value: '医疗' },
        { label: '教育/培训', value: '教育' },
        { label: '设计/创意', value: '设计' },
        { label: '制造/工程', value: '制造' },
        { label: '贸易/零售', value: '贸易' },
        { label: '文化/传媒', value: '文化' },
        { label: '其他', value: '其他' }
      ],
      
      // 员工规模选项
      staffSizeOptions: [
        { label: '1-10人', value: '1-10' },
        { label: '11-50人', value: '11-50' },
        { label: '51-100人', value: '51-100' },
        { label: '101-200人', value: '101-200' },
        { label: '200人以上', value: '200+' }
      ],
      
      // 用电设备选项
      deviceOptions: [
        { label: '服务器/机房', value: 'server' },
        { label: '空调系统', value: 'ac' },
        { label: '照明系统', value: 'lighting' },
        { label: '办公设备', value: 'office' },
        { label: '生产设备', value: 'production' },
        { label: '实验设备', value: 'lab' },
        { label: '厨房设备', value: 'kitchen' },
        { label: '其他设备', value: 'other' }
      ],
      
      // 面积参考
      areaReferences: [
        { label: '小型办公室 50m²', value: '50' },
        { label: '标准办公室 100m²', value: '100' },
        { label: '中型办公室 200m²', value: '200' },
        { label: '大型办公室 500m²', value: '500' },
        { label: '整层办公室 1000m²', value: '1000' }
      ],
      
      // 示例别名
      exampleAliases: [
        '创新科技', '智慧办公', '绿色先锋', 
        '数字空间', '高效企业', '节能典范'
      ],
      
      selectedFloorIndex: 0,
      selectedIndustryIndex: 0,
      selectedStaffSizeIndex: 0
    }
  },
  
  computed: {
    // 表单验证
    isFormValid() {
      return (
        this.companyInfo.realName.trim() &&
        this.companyInfo.aliasName.trim().length >= 2 &&
        this.companyInfo.floor &&
        this.companyInfo.area &&
        this.companyInfo.industry
      )
    }
  },
  
  methods: {
    // 返回上一页
    goBack() {
      uni.navigateBack()
    },
    
    // 楼层选择
    onFloorChange(e) {
      const index = e.detail.value
      this.selectedFloorIndex = index
      this.companyInfo.floor = this.floorOptions[index].value
    },
    
    // 行业选择
    onIndustryChange(e) {
      const index = e.detail.value
      this.selectedIndustryIndex = index
      this.companyInfo.industry = this.industryOptions[index].value
    },
    
    // 员工规模选择
    onStaffSizeChange(e) {
      const index = e.detail.value
      this.selectedStaffSizeIndex = index
      this.companyInfo.staffSize = this.staffSizeOptions[index].value
    },
    
    // 营业时间选择
    onStartTimeChange(e) {
      this.companyInfo.businessHours.start = e.detail.value
    },
    
    onEndTimeChange(e) {
      this.companyInfo.businessHours.end = e.detail.value
    },
    
    // 用电设备选择
    toggleDevice(deviceValue) {
      const index = this.companyInfo.mainDevices.indexOf(deviceValue)
      if (index > -1) {
        this.companyInfo.mainDevices.splice(index, 1)
      } else {
        this.companyInfo.mainDevices.push(deviceValue)
      }
    },
    
    // 开关切换
    onACSwitchChange(e) {
      this.companyInfo.hasIndependentAC = e.detail.value
    },
    
    on24HourSwitchChange(e) {
      this.companyInfo.is24HourOperation = e.detail.value
    },
    
    // 保存企业信息
    saveCompanyInfo() {
      if (!this.isFormValid) {
        uni.showToast({
          title: '请填写完整的企业基本信息',
          icon: 'none'
        })
        return
      }
      
      uni.showLoading({
        title: '保存中...'
      })
      
      // 模拟保存到服务器
      setTimeout(() => {
        // 保存到本地存储
        uni.setStorageSync('companyInfo', this.companyInfo)
        
        uni.hideLoading()
        uni.showToast({
          title: '企业信息保存成功',
          icon: 'success'
        })
        
        // 返回上一页
        setTimeout(() => {
          this.goBack()
        }, 1500)
      }, 1000)
    },
    
    // 加载已保存的企业信息
    loadCompanyInfo() {
      const savedInfo = uni.getStorageSync('companyInfo')
      if (savedInfo) {
        this.companyInfo = { ...this.companyInfo, ...savedInfo }
        
        // 设置选择器的默认值
        this.selectedFloorIndex = this.floorOptions.findIndex(item => item.value === this.companyInfo.floor)
        this.selectedIndustryIndex = this.industryOptions.findIndex(item => item.value === this.companyInfo.industry)
        this.selectedStaffSizeIndex = this.staffSizeOptions.findIndex(item => item.value === this.companyInfo.staffSize)
      }
    }
  },
  
  onLoad() {
    this.loadCompanyInfo()
  }
}
</script>

<style scoped>
.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: #f5f7fa;
}

.status-bar {
  height: var(--status-bar-height);
  background: transparent;
}

/* 导航栏样式 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  background: white;
  border-bottom: 1rpx solid #f0f0f0;
}

.nav-left {
  display: flex;
  align-items: center;
}

.nav-icon {
  font-size: 32rpx;
  margin-right: 8rpx;
}

.nav-text {
  font-size: 28rpx;
  color: #1890ff;
}

.nav-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #333;
}

.nav-right {
  width: 80rpx;
}

/* 页面内容 */
.page-content {
  flex: 1;
  padding: 30rpx;
}

/* 卡片通用样式 */
.card {
  background: white;
  border-radius: 20rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30rpx;
}

.card-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.card-icon {
  width: 60rpx;
  height: 60rpx;
  border-radius: 15rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e6f7ff;
  color: #1890ff;
  font-size: 28rpx;
}

/* 表单样式 */
.form-section {
  display: flex;
  flex-direction: column;
  gap: 40rpx;
}

.form-item {
  position: relative;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.form-input {
  width: 100%;
  height: 88rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333;
  background: #fafafa;
  transition: all 0.3s ease;
}

.form-input:focus {
  border-color: #1890ff;
  background: white;
}

.form-tip {
  display: block;
  font-size: 22rpx;
  color: #999;
  margin-top: 12rpx;
}

.char-count {
  position: absolute;
  right: 24rpx;
  top: 88rpx;
  font-size: 22rpx;
  color: #999;
}

/* 示例别名样式 */
.example-section {
  margin-top: 20rpx;
}

.example-title {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.example-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.example-tag {
  padding: 12rpx 20rpx;
  background: #f0f7ff;
  border: 1rpx solid #1890ff;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #1890ff;
}

/* 选择器样式 */
.form-picker {
  width: 100%;
}

.picker-trigger {
  height: 88rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  padding: 0 24rpx;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.picker-value {
  font-size: 28rpx;
  color: #333;
}

.picker-value:placeholder {
  color: #999;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

/* 带单位的输入框 */
.input-with-unit {
  position: relative;
  display: flex;
  align-items: center;
}

.number-input {
  padding-right: 80rpx;
}

.input-unit {
  position: absolute;
  right: 24rpx;
  font-size: 28rpx;
  color: #666;
}

/* 面积参考样式 */
.reference-section {
  margin-top: 20rpx;
}

.reference-title {
  display: block;
  font-size: 24rpx;
  color: #666;
  margin-bottom: 16rpx;
}

.reference-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 16rpx;
}

.reference-tag {
  padding: 12rpx 20rpx;
  background: #f6ffed;
  border: 1rpx solid #b7eb8f;
  border-radius: 20rpx;
  font-size: 24rpx;
  color: #52c41a;
}

/* 时间选择器样式 */
.time-range {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.time-picker {
  flex: 1;
}

.time-trigger {
  height: 88rpx;
  border: 2rpx solid #e8e8e8;
  border-radius: 12rpx;
  padding: 0 24rpx;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.time-value {
  font-size: 28rpx;
  color: #333;
}

.time-separator {
  font-size: 28rpx;
  color: #666;
}

/* 复选框样式 */
.checkbox-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.checkbox-item {
  display: flex;
  align-items: center;
  padding: 16rpx 0;
}

.checkbox {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #d9d9d9;
  border-radius: 8rpx;
  margin-right: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.checkbox-checked {
  background: #1890ff;
  border-color: #1890ff;
}

.checkmark {
  color: white;
  font-size: 24rpx;
  font-weight: bold;
}

.checkbox-label {
  font-size: 26rpx;
  color: #333;
}

/* 开关组样式 */
.switch-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 0;
}

.switch-label {
  font-size: 28rpx;
  color: #333;
}

/* 数据使用说明样式 */
.usage-content {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
}

.usage-item {
  display: flex;
  align-items: flex-start;
  gap: 16rpx;
}

.usage-icon {
  font-size: 32rpx;
  margin-top: 4rpx;
}

.usage-text {
  flex: 1;
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
}

/* 保存按钮样式 */
.action-section {
  margin: 40rpx 0;
  text-align: center;
}

.save-btn {
  background: #1890ff;
  color: white;
  height: 96rpx;
  border-radius: 20rpx;
  font-size: 32rpx;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  border: none;
  box-shadow: 0 6rpx 20rpx rgba(24, 144, 255, 0.3);
  transition: all 0.3s ease;
}

.save-btn:disabled {
  background: #cccccc;
  box-shadow: none;
}

.save-btn:active:not(:disabled) {
  transform: translateY(2rpx);
  box-shadow: 0 4rpx 12rpx rgba(24, 144, 255, 0.4);
}

.btn-text {
  font-weight: 600;
}

.save-tip {
  display: block;
  font-size: 24rpx;
  color: #ff4d4f;
  margin-top: 16rpx;
}
</style>